<template>
  <div
      class="tw-w-580 tw-pt-25 border-box tw-bg-white tw-px-20  tw-py-24 border-box tw-h-326 "
  >
    <div class="flex-middle font-normal ">
      <span class="tw-w-3 bg-color-theme tw-h-16 tw-mr-10"></span>
      <span class="text-[#171920] font-bold"> 热点资讯 </span>
    </div>
    <ul class=" flex-between tw-flex-wrap tw-overflow-hidden" style="width:100%;">
      <li
          v-for="(item, index) in newsList.slice(0,12)"
          :key="item.id"
          :class="index==0|| index==5  ? 'tw-w-[100%] tw-pt-20 tw-pb-15 tw-h-55 tw-leading-55 tw-line-clamp-1' : 'tw-leading-[30px] tw-h-30 tw-w-[48%] tw-line-clamp-1'"
          @click="goNewsInfo(item)"
      >
        <div v-if="item.mainArticleFlag == 0" class="flex-middle click link">
          <p class="square-black tw-rounded-full"></p>
          <span class="one-line tw-ml-8 font-small">{{ item.title }}</span>
        </div>
        <div v-else class="flex-center ">
          <span class="font-small link tw-font-medium font-large one-line" style="color:rgb(254, 46, 54);">{{
              item.title
            }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
defineProps({
  newsList: {
    type: Array,
    default: [],
  },
});
const emit = defineEmits(["goNewsInfo"]);
const goNewsInfo = (item) => {
  emit("goNewsInfo", {id: item.id, type: 1});
};
</script>

<style lang="scss" scoped></style>
